<template>
    <div id="she">
        <header >
            <headerbar></headerbar>
        </header>
        <!-- <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in swiperlist">
                    <img class="showimg" :src='item.pic'>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div> -->
        <load :shedatalist="showdatalist"></load>
        <mu-infinite-scroll  :loading="loading" @load="loadMore"/>
    </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    import headerbar from '../common/headerbar'; //头部子组件
    import 'swiper/dist/css/swiper.min.css'
    import Swiper from 'swiper' //引入轮播图
    import load from '../common/homepageload' //引入懒加载的瀑布流组件
    //import API from '../../api/index'
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex';

    export default {
        name: 'she', //组件的名字
        data() {
            return { //数据
                msg: 'she',
                list: [],
                loading: false,
                scroller: '',
                info: {
                    "rows": 2,
                    "page": 1,
                    "startRowNum": 1,
                    "keywords": ''
                },
                showdatalist: [],
                sle: {

                }
            }
        },
        methods: { //方法
            ...mapActions(['getshedatalist']),
            loadMore() { //上啦刷新
                this.loading = true
                    // this.info.rows += 2;
                this.info.page += 1;
                setTimeout(() => {
                    this.initdatalist()
                    this.loading = false
                }, 1000)
            },
            initdatalist() {
                var info = this.info;
                var infos = JSON.stringify(info);
                this.getshedatalist(infos);
            }
        },
        computed: { //计算 用来引入vuex里面state
            ...mapGetters(['swiperlist']),
            ...mapState(['shedatalist'])
        },
        mounted: function() { //组件加载完成
            this.initdatalist()

            // new Swiper('.swiper-container', { //使用 轮播
            //     direction: 'horizontal',
            //     loop: true,
            //     autoplay: 2500,
            //     width: window.innerWidth,
            //     height: 400,
            //     pagination: '.swiper-pagination',
            //     paginationClickable: true,
            //     autoplayDisableOnInteraction: false,
            //     preventClicks: true
            // })
        },
        watch: { //健康某个数据变化后触发某个事件
            'shedatalist': function(val) {
                this.showdatalist = this.showdatalist.concat(val)
            }
        },
        destroyed: function() { //离开这个组件



        },
        components: { //加载子组件
            'load': load, //加载 瀑布流
            'headerbar': headerbar
        }
    }
</script>
<style scoped>
    .swiper-container {
        margin-bottom: 5px;
    }
    
    .swiper-container .showimg {
        width: 100%;
        display: block;
    }
    
    #she {
        border-bottom: 60px solid transparent;
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->